<template>
	<view class="order">

		<view class="item_right">
			<scroll-view :scroll-y="true" class="right_view">
				<view class="item_right_li" v-for="(item, index) in dataList" :key="index">
					<view class="logo">
						<u--image :src="'/static/upload/'+scanType+'/'+item.sbjbbh + '.jpg'" width="180rpx"
							height="140rpx"></u--image>
					</view>
					<view class="con">
						<view class="title">{{ item.sbjbmz }}</view>
						<!-- <view class="sale">单位:{{ item.sbjbjldw }}</view> -->

						<view class="price">
							<view class="l">¥{{ item.ssje01 }}</view>
							<view class="r">
								<u-number-box step="1" decimalLength="1" v-model="item.number" asyncChange :name="index"
									:min="0" @change="ChangeVal"></u-number-box>
							</view>
							<!-- <view class="r" else @click="item.number++">
								<u-icon name="plus-circle" size="24"></u-icon>
							</view> -->
						</view>
						<view class="sale" @click="Clickshowsmbz(item)" v-if="!item.smbz">编辑口味</view>
						<view class="sale" @click="Clickshowsmbz(item)" v-else>口味：{{ item.smbz }}</view>
					</view>
				</view>
				<view class="type">
					叫菜方式：
					<u-radio-group v-model="type">
						<u-radio shape="circle" label="走菜" name="走菜"></u-radio>
						<u-radio shape="circle" label="叫起" name="叫起"
							:customStyle="{ 'margin-left': '20rpx' }"></u-radio>
					</u-radio-group>
				</view>
				<view class="total">
					<view>数量：{{ totalCount.number }}</view>
					<view class="">金额：{{ totalCount.price }}</view>
				</view>
				<view style="height: 200rpx"></view>
			</scroll-view>
		</view>
		<viwe class="tag">
			<view class="tag_li"></view>
		</viwe>
		<view class="footer">
			<view class="footer_li" @click="confirm">确定下单</view>
		</view>
		<u-overlay :show="showsmbzInfo">
			<view class="warp">
				<view class="warp_con">
					<view class="btn">
						<u-button class="btn_li" :text="item.smbz" v-for="(item, index) in kwList" :key="index"
							@click="clickBtn(item)"></u-button>
					</view>
					<view class="textarea">
						<u-textarea v-model="smbz" height="50" placeholder="请输入内容" @change="changeText"></u-textarea>
					</view>
					<view class="xxx_footer">
						<view class="btn_li">
							<u-button text="单个添加" @click="changeAdd('one')" type="primary" size=""></u-button>
						</view>
						<view class="btn_li">
							<u-button text="全部添加" @click="changeAdd('all')" type="success" size=""></u-button>
						</view>
						<view class="btn_li">
							<u-button text="关闭" @click="closeTag" size=""></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				zzmz: 0,
				kwList: [],
				smbz: '',
				selectTag: [],
				showsmbzInfo: false,
				itemList: [],
				type: '走菜',
				totalCount: {
					number: 0,
					price: 0
				},
				scanType: ''
			};
		},
		watch: {

		},
		onLoad({
			zzmz
		}) {
			if (zzmz) {
				this.zzmz = zzmz;
				uni.setNavigationBarTitle({
					title: zzmz + '的订单'
				})
			}
			const scancode = uni.getStorageSync('scanCode')
			if (scancode) {
				this.scanType = scancode.type
			}
			this.getInfo();
			this.getKw();
		},
		methods: {
			totalCountInfo() {
				let number = 0;
				let price = 0;
				this.dataList.forEach((item) => {
					number += item.sssl * 1;
					price += item.ssje * 1;
				});
				this.totalCount = {
					number,
					price
				};
			},
			confirm() {
				let _this = this;
				uni.showModal({
					content: '确认下单吗？',
					showCancel: true,
					success(btn) {
						if (btn.confirm) {
							uni.showLoading({
								title: '等稍后',
								mask: true
							});
							_this
								.$http('order/confirm', {
									zzmz: _this.zzmz,
									type: _this.type
								})
								.then((res) => {
									uni.hideLoading();
									uni.reLaunch({
										url: '/pages/index/index'
									})
								});
						}
					}
				})

			},
			Clickshowsmbz(item) {
				this.itemList = item;
				if (item.smbz) {
					this.selectTag = item.smbz.split(',');
					this.smbz = item.smbz;
					this.showsmbzInfo = true;
				} else {
					this.selectTag = [];
					this.showsmbzInfo = true;
				}
			},
			changeAdd(type = 'add') {
				let _this = this;
				this.$http('order/updateTag', {
					zzmz: _this.zzmz,
					..._this.itemList,
					l_type: type,
					smbz: _this.smbz
				}).then((res) => {
					if (res.code) {
						this.showsmbzInfo = false;
						_this.getInfo();
					}
				});
			},
			closeTag() {
				this.selectTag = [];
				this.smbz = '';
				this.showsmbzInfo = false;
			},
			changeText(e) {
				if (!e) {
					this.selectTag = [];
				}
			},
			clickBtn(row) {
				let _this = this;
				console.log(row);
				_this.selectTag.push(row.smbz);
				_this.smbz = _this.selectTag.join(',');
			},
			getKw() {
				let _this = this;
				_this.$http('order/smbz', {}).then((res) => {
					if (res.code) {
						this.kwList = res.data;
					}
				});
			},
			getInfo() {
				let _this = this;
				_this
					.$http('order/getOrderList', {
						zzmz: _this.zzmz
					})
					.then((res) => {
						if (res.code) {
							this.dataList = res.data;
							_this.totalCountInfo();
						}
					});
			},
			ChangeVal(e) {
				let _this = this;
				uni.showLoading({
					title: '请稍后'
				});
				let item = this.dataList[e.name];
				_this
					.$http('order/changeNumber', {
						...item,
						number: e.value,
						zzmz: _this.zzmz
					})
					.then((res) => {
						uni.hideLoading();
						this.getInfo();
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.total {
		display: flex;
		justify-content: space-between;
		width: 94.7%;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.type {
		width: 94.7%;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
	}

	.footer {
		position: fixed;
		bottom: 0;
		background: linear-gradient(45deg, #ff6700, orange);
		width: 100%;

		&_li {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 24rpx 0;
			color: #fff;
		}
	}

	.warp {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;

		.warp_con {
			width: 560rpx;
			height: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.btn {
				display: flex;
				padding: 24rpx;
				flex-wrap: wrap;
				height: 300rpx;
				overflow: auto;

				&_li {
					width: 160rpx;
				}
			}

			.textarea {}

			.xxx_footer {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: space-around;
				align-items: center;

				.btn_li {
					// border: 1rpx solid #ccc;
					text-align: center;
				}
			}
		}
	}

	.item_right {
		flex: 1;

		&_li {
			flex: 1;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.logo {
				margin-right: 20rpx;
			}

			.con {
				flex: 1;
			}

			.title {
				flex: 1;
			}

			.sale {
				flex: 1;
				font-size: 28rpx;
				color: #747474;
			}

			.price {
				flex: 1;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>